<template>
	<view class="contents">
		<view class="header-search">
			<u--form :model="form">
				<u-form-item label="物品类型:" border-bottom='false' @tap='showtype = true' :labelWidth='80'>
					<u--input v-model="form.obj1" disabled disabledColor="#ffffff" border='node' placeholder="请选择">
					</u--input>
					<u-icon slot="right" name="arrow-right"></u-icon>
				</u-form-item>
				<u-form-item label="采购时间:" @tap='timeshow = true' :labelWidth='80'>
					<u--input v-model="form.time" disabled disabledColor="#ffffff" placeholder="选择时间">
					</u--input>
					<image class='up' src="../../static/up.png" mode=""></image>
				</u-form-item>
			</u--form>

		</view>
		<view class="title">
			采购次数/金融
		</view>
		<view class="charts-box">
			<l-echart ref="charts"></l-echart>
		</view>
		<view class="title">
			<view>
				采购类别
			</view>
			<view class="right" @tap="seedetails">
				查看明细>>
			</view>
		</view>
		<view class="charts-box" v-show="!showtype&&!timeshow">
			<l-echart ref="chart"></l-echart>
		</view>
		<view class="">
			<u-picker @cancel='showtype=false' :show="showtype" ref="uPicker" :columns="actions" @confirm="confirm">
			</u-picker>
			<u-calendar @close='timeshow=false' :show="timeshow" mode="range" @confirm="confirmTime"></u-calendar>
		</view>
	</view>
</template>

<script>
	import * as echarts from 'echarts'
	import LEchart from '../components/l-echart/l-echart.vue';
	export default {
		data() {
			return {
				optionsss: {
					legend: {
						// orient: 'vertical',
						top: "30",
						right: '20'
					},
					dataset: {
						source: [
							['product', '次数', '金额'],
							['10.1', 43.3, 85.8],
				   ['10.2', 801, 655],
					 	['10.3', 801, 655],
							['10.4', 801, 655],
							['10.5', 801, 655],
							['10.6', 801, 655],
							['10.7', 801, 655],
						]
					},
				 xAxis: {
						type: 'category'
					},
					yAxis: {
						splitLine:{
						    show:true,
						    lineStyle:{
						        type:'dashed'
						    }
						}
					},
					series: [{
						type: 'bar',
						label: {
							show: true,
							position: 'top', //在上方显示
							textStyle: { //数值样式
								color: '#83bff6',
							}

						},
						itemStyle: {

							color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [{
									offset: 0,
									color: '#83bff6'
								},
								{
									offset: 0.5,
									color: '#188df0'
								},
								{
									offset: 1,
									color: '#188df0'
								}
							]),
						},
					}, {
						type: 'bar',
						label: {
							show: true,
							position: 'top', //在上方显示
							textStyle: { //数值样式
								color: '#ed7613',
							}

						},
						itemStyle: {

							color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [{
									offset: 0,
									color: '#f8b107'
								},
								{
									offset: 0.5,
									color: '#f49210'
								},
								{
									offset: 1,
									color: '#ed7613'
								}
							]),
						},
					}]
				},
				form: {
					obj1: '',
					time: '',
				},
				actions: [
					['中国', '美国', '日本']
				],
				showtype: false,
				timeshow: false,
				opt:{
					title: {
						zlevel: 0,
						subtext: '600',
						subtextStyle: {
							color: '#000',
							fontWeight: 'bold',
							fontSize: 12
						},
						x: '125', //文字位置
						y: '130' //文字位置
					},
					legend: {
						right: '0',
						top: 'middle',
						orient: 'vertical'
					},
					series: [{
						name: '',
						type: 'pie',
						radius: [15, 100],
						center: ['35%', '50%'],
						roseType: 'area',
						percentPrecision: 0,
						itemStyle: {
							borderRadius: 5
						},
						labelLine: {
							length: 10,
							length2: 10,
							maxSurfaceAngle: 80,
						},
						label: {
							alignTo: 'labelLine',
							formatter: '{b}\n {d}% \n{c}',
							minMargin: 0,
							edgeDistance: 10,
							lineHeight: 20,
							padding: [0, -30],
				
							rich: {
								b: {
									fontSize: 10,
									lineHeight: 0,
								},
								d: {
									fontSize: 10,
									lineHeight: 20,
									color: 'red',
								},
								c: {
									ontSize: 10,
									lineHeight: 20
								}
							}
						},
				
					data: [{
							"name": "实物类",
							"value": 50,
							itemStyle: {
								normal: {
									color: new echarts.graphic.LinearGradient(1, 0, 0, 0, [{
										offset: 0,
										color: '#44a1f9'
									}, {
										offset: 1,
										color: '#4dc3ec'
									}]),
								}
							}
						}, {
							"name": "工程类",
							"value": 30,
							itemStyle: {
								normal: {
									color: new echarts.graphic.LinearGradient(1, 0, 0, 0, [{
										offset: 0,
										color: '#e35846'
									}, {
										offset: 1,
										color: '#e25d45'
									}]),
								}
							}
						}, {
							"name": "货物类",
							"value": 50,
							itemStyle: {
								normal: {
									color: new echarts.graphic.LinearGradient(1, 0, 0, 0, [{
										offset: 0,
										color: '#faa14b'
									}, {
										offset: 1,
										color: '#ff9d45'
									}]),
								}
							}
						}, {
							"name": "食物",
							"value": 35,
							itemStyle: {
								normal: {
									color: new echarts.graphic.LinearGradient(1, 0, 0, 0, [{
										offset: 0,
										color: '#4de49e'
									}, {
										offset: 1,
										color: '#17b7a6'
									}]),
								}
							}
						}, {
							"name": "其他",
							"value": 20,
							itemStyle: {
								normal: {
									color: new echarts.graphic.LinearGradient(1, 0, 0, 0, [{
										offset: 0,
										color: '#8d62f2'
									}, {
										offset: 1,
										color: '#6e51e2'
									}]),
								}
							}
						}]
					}]
				},
			}
		},
		components: {
			LEchart
		},
		mounted() {
			this.$refs.chart.init(echarts, chart => {
				chart.setOption(this.opt);
			});
			this.$refs.charts.init(echarts, chart => {
				chart.setOption(this.optionsss);
			});
		},
		methods: {
			seedetails() {
				uni.showToast({
					title: '跳转'
				})
			},
			confirm(e) {
				this.form.obj1 = e.value[0]
				this.showtype = false
			},
			confirmTime(e) {
				this.form.time = e[0] + '~' + e[e.length - 1]
				this.timeshow = false
			},

			getDate(format = 'Y-M-D h:m:s', time = null) {
				let date = null

				if (time) {
					date = new Date(time) //时间戳为10位需*1000，时间戳为13位的话不需乘1000
				} else {
					date = new Date()
				}
				let formatArr = ['Y', 'M', 'D', 'h', 'm', 's']
				let timeObj = {
					Y: date.getFullYear(),
					M: date.getMonth() + 1,
					D: date.getDate(),
					h: date.getHours(),
					m: date.getMinutes(),
					s: date.getSeconds()
				}

				for (const key in timeObj) {
					if (timeObj[key] < 10) {
						timeObj[key] = '0' + timeObj[key]
					}
				}

				for (const keyWord of formatArr) {
					if (format.indexOf(keyWord) !== '-1') {
						format = format.replace(new RegExp(keyWord, 'g'), timeObj[keyWord])
					}
				}
				return format
			},
		}
	}
</script>

<style lang="scss">
	.contents {
		.up {
			width: 20rpx;
			height: 12rpx;
			position: absolute;
			top: 155rpx;
			right: 50rpx
		}

		.title {
			display: flex;
			justify-content: space-between;
			align-items: center;
			height: 80rpx;
			background-color: #f5f5f5;
			margin-top: 18rpx;
			padding: 0 35rpx;
			font-size: 28rpx;
			font-weight: 600;

			.right {
				float: right;
				font-size: 28rpx;
				font-weight: 500;
			}
		}

		.header-search {
			height: 200rpx;
			padding: 0 35rpx;

			.time {
				width: 233rpx;
				height: 66rpx;
				margin-left: 20rpx;
				border: 1px solid #666;
				line-height: 66rpx;
				display: flex;
				justify-content: space-around;
				border-radius: 10rpx;
				color: #a3a3a3;
			}

			.blcak {
				color: #000;
			}

			.ccc {
				color: #a3a3a3;
			}

			.line {
				width: 10rpx;
				height: 5rpx;
				background-color: #a3a3a3;
				margin-left: 10rpx;
			}
		}
	}
</style>
